<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>贪吃蛇游戏</h1>
        <div class="score-bg">
            <span>当前积分：</span><span id="score">0</span>
            <button id="bg-switch">切换背景</button>
        </div>
        <div class="mode-select">
            <label for="mode">选择模式：</label>
            <select id="mode">
                <option value="classic">经典模式</option>
                <option value="endless">无尽模式</option>
                <option value="speedup">加速模式</option>
                <option value="obstacle">障碍模式</option>
            </select>
        </div>
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="tips">使用方向键控制蛇移动</div>
        <button id="startBtn" class="start-btn">开始游戏</button>
    </div>
    <script src="snake.js"></script>
    <script>
        let mode = 'classic';
        let speed = 120;
        const modeSelect = document.getElementById('mode');
        modeSelect.addEventListener('change', function() {
            mode = this.value;
            window.location.reload();
        });
    </script>
</body>
</html> 